<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col">
            <label for="name" class="form-label">Name:</label>
            <input type="text" class="form-control" id="name" placeholder="John">
        </div>
    </div>
    <div class="row">
        <div class="col">
            <label for="lastname" class="form-label">Lastname:</label>
            <input type="text" class="form-control" id="lastname" placeholder="Doe">
        </div>
    </div>
    <div class="row">
        <div class="col text-end mt-3">
            <button class="btn btn-success" id="addButton"> Add</button>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Lastname</th>
                </tr>
                </thead>
                <tbody id="list">
                <tr class="text-center">
                    <td colspan="2"> Empty List</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>
<script>
    const name = document.querySelector('#name');
    const lastname = document.querySelector('#lastname');
    const addButton = document.querySelector('#addButton');
    const listTable = document.querySelector('#list');

    addButton.addEventListener('click', () => {
        name.classList.remove('is-invalid')
        lastname.classList.remove('is-invalid')
        save(name.value, lastname.value).then((error) => {
            if (error.name) {
                name.classList.add('is-invalid')
            }
            if (error.lastname) {
                lastname.classList.add('is-invalid')
            }
        });
        getList().then((list) => {
            if (list.length > 0) {
                listRows = '';
                list.forEach((element) => {
                    listRows += '<tr>';
                    listRows += '<td>' + element.name + '</td>';
                    listRows += '<td>' + element.lastname + '</td>';
                    listRows += '</tr>';
                });
                listTable.innerHTML = listRows;
            }
        });

    });

</script>
</body>
</html>